<template>
  <div class="court">
    <!-- 主页面 -->
    <div
      class="picContainer"
      v-for="(pic, index) in picList"
      :key="index"
      @click="confirm(pic)"
    >
      <img ref="image" :src="pic.imagePath" @load="picLoadedHandler(pic)" />
      <div
        class="introduction"
        :style="{ backgroundColor: pic.bgColor, color: pic.fontColor }"
        v-show="false"
      >
        {{ pic.name }}
      </div>
      <div
        class="detail"
        :style="{
          background: 'linear-gradient(to top, ' + pic.detailBgColor + ')',
          color: pic.fontColor,
        }"
      >
        <div class="detailTitle">{{ pic.name }}</div>
        <div
          class="detailContent"
          v-for="(detail, index1) in pic.detail"
          :key="index1"
        >
          <div :style="{ backgroundColor: pic.fontColor }"></div>
          <span>{{ detail.key }}</span
          >: <span>{{ detail.value }}</span>
        </div>
      </div>
    </div>
    <!-- 缺省页 -->
    <div class="emptyPage" v-show="emptyPageShow">
      <img src="@/assets/other/emptyPage.png" />
      <p>暂无搜索结果</p>
    </div>
  </div>
</template>
      
<script>
/*eslint-disable*/
import { getCurrentInstance, onMounted } from "vue";
import { ElMessage } from "element-plus";
import pubsub from "pubsub-js";
import { useStore } from "vuex";

import mainApi from "@/api/mainApi";
import imgApi from "@/api/imgApi";

export default {
  name: "正赛球场",
  props: {
    propsData: {
      type: Object,
      default: "",
    },
  },
  data() {
    return {
      picList: [],
      emptyPageShow: true,
      picLength: 0,
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const store = useStore();
    // 待传输的mod
    let modName, modPath;

    onMounted(() => {
      mainApi.writeDailyLog("初始化渲染完成，开始preload" + "--Court.vue");
      // 读取地板数据
      readCourtData(proxy.propsData.propName);
      // 路由信息存储至vuex
      uploadVuex();
    });

    // 读取具体球队的地板文件
    function readCourtData(name) {
      // console.log(proxy.emptyPageShow);
      // 读取文件仓库中的文件
      mainApi.readJson(ElMessage, (data) => {
        mainApi.writeDailyLog(
          "读取文件仓库路径:" + data.fileHouse + "--Court.vue"
        );
        // 遍历文件路径
        traverseDirectory(
          window.myApi.path.join(data.fileHouse, "/court"),
          name
        );
      });
    }

    // mod文件遍历
    function traverseDirectory(folderPath, teamName) {
      let fs = window.myApi.fs;
      let path = window.myApi.path;

      if (!fs.existsSync(folderPath)) {
        console.log("文件夹不存在:", folderPath);
        return;
      }

      let files;
      try {
        // 读取文件夹内容
        files = fs.readdirSync(folderPath);
      } catch (error) {
        console.log("文件读取失败", error);
        mainApi.writeDailyLog("文件读取失败:" + error + "--Court.vue");
      }

      // files.filter((file) => console.log(file.split(" ")[1].split("地板")[0]));

      // 读取待加载的文件总数
      proxy.picLength = files.filter(
        (file) => file.split(" ")[1].split("地板")[0].indexOf(teamName) != -1
      ).length;
      // console.log(proxy.picLength);
      mainApi.writeDailyLog(
        "读取待加载的文件总数:" + proxy.picLength + "--Court.vue"
      );
      // 遍历文件夹内容
      files.forEach((file) => {
        // 文件夹路径
        let fullPath = path.join(folderPath, file, "preview");
        // 预览图
        fullPath = path.join(fullPath, fs.readdirSync(fullPath)[0]);
        // 作者
        let author = file.split(" ")[2];
        // mod名称
        let name = file.split(" ")[1].split("$")[0];;
        // mod类型
        let type = mainApi.TypeDistinction(fullPath);

        // 队名筛选
        if (name.split("地板")[0].indexOf(teamName) === -1) {
          return;
        }
        mainApi.writeDailyLog("预览图读取路径:" + fullPath + "--Court.vue");

        // console.log(file + "|" + name.split("地板")[0] + "|");

        // 缺省关闭
        proxy.emptyPageShow = false;
        // 开启读条
        pubsub.publish("pageLoading", true);
        // 读取图片为base64
        fs.readFile(fullPath, { encoding: "base64" }, (err, imageData) => {
          if (err) {
            ElMessage({
              message: `[${file}]图片读取失败`,
              type: "error",
              duration: 10000,
            });
            mainApi.writeDailyLog(
              ` ${file}图片读取失败:` + fullPath + "--Court.vue"
            );
            throw err;
          }

          // 载入内容
          proxy.picList.push({
            imagePath: "data:image/png;base64," + imageData,
            bgColor: null,
            fontColor: null,
            detailBgColor: null,
            folderPath: path.join(folderPath, file),
            name: name,
            detail: [
              {
                key: "类型",
                value: type,
              },
              {
                key: "作者",
                value: author,
              },
            ],
          });
          mainApi.writeDailyLog(
            ` ${file}图片读取成功:` + fullPath + "--Court.vue"
          );
        });
      });
    }

    // 路由信息暂存至vuex
    function uploadVuex() {
      store.commit("writeRouteData", {
        // 目标组件
        moduleName: proxy.propsData.origin_nav,
        // 选中球队
        teamName: proxy.propsData.propName,
      });
    }

    // 确认替换
    function confirm(data) {
      // proxy.dialogVisible = false;
      // mainApi.modReplace(modPath, modName);
      modPath = data.folderPath;
      modName = data.name;
      mainApi.writeDailyLog("执行替换:" + modPath + "--Court.vue");
      // 页面跳转至mod详细界面
      pubsub.publish("routerChange", {
        contentAuthor: modPath.split(" ")[2],
        contentName: modPath.split("\\")[modPath.split("\\").length - 1],
        contentType: "court",
        origin_nav: "court",
        startComponent: "court",
        targetComponent: "detail",
      });
    }

    return {
      confirm,
    };
  },
  methods: {
    picLoadedHandler(pic) {
      const image = this.$refs.image[this.picList.indexOf(pic)];
      imgApi.extractbgColor(image, pic).then(() => {
        // console.log(this.picList.indexOf(pic) + 1, this.picLength);
        pubsub.publish("loadingDataRenew", {
          loadingCount: this.picList.indexOf(pic) + 1,
          loadingSum: this.picLength,
        });
        // 加载完成后关闭加载页面
        if (this.picList.indexOf(pic) + 1 === this.picLength) {
          mainApi.writeDailyLog("preload渲染完成" + "--Court.vue");
          pubsub.publish("pageLoading", false);
        }
      });
    },
  },
};
</script>
      
<style lang="less" scoped>
@import "../less/variables.less";
.court {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* 鼠标悬停时的滑块样式 */
.court::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

.picContainer {
  box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  width: 600px;
  height: 300px;
  min-width: 250px * 0.75;
  overflow: hidden;
  margin: 0% 2%;
  margin-top: 0.5%;
  margin-bottom: 2%;
  position: relative;
  > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  > .introduction {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0% 1%;
    // font-size: @font4;
    font-size: 120%;
    font-weight: bold;
    position: absolute;
    top: @modNameTop;
    height: @modNameHeight;
    width: 100%;
    white-space: nowrap;
  }
  > .detail {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90%;
    padding: 5%;
    box-sizing: border-box;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    > .detailTitle {
      font-weight: bold;
      font-size: 120%;
      margin-top: 15%;
    }
    > .detailContent {
      display: flex;
      align-items: center;
      margin: 4% 0%;
      font-size: 90%;
      > div {
        display: inline-block;
        width: 3px;
        height: 15px;
        border-radius: 15px;
        margin-right: 2%;
      }
    }
  }
}
.picContainer:hover .detail {
  transform: translateY(0);
  cursor: pointer;
}

.emptyPage {
  width: 50%;
  text-align: center;
  margin-left: 30%;
  margin-top: 5%;
  > img {
    width: 20%;
  }
}
</style>
      